<script setup>
	import {
		defineProps,
		ref
	} from 'vue'

	const props = defineProps({
		navContent: Array
	})

	const rowNum = ref(Math.ceil(props.navContent.length / 3))
	const rowHeight = ref((100 / rowNum) / 100)
</script>

<template>
	<view class="nav" :style="{'grid-template-rows': `repeat(${rowNum}, ${rowHeight}`}">
		<view class="column" v-for="(item, index) in navContent" :key="index" @click="$emit('navItemClick', index)">
			<image :src="item.imagePath"></image>
			<text> {{ item.title }}</text>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.nav {
		width: 100%;
		min-height: 14vh;
		padding: 2vh 0;
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius;
		display: grid;
		grid-template-columns: repeat(3, 33%);
		// grid-template-rows: repeat(2, 50%);
		grid-gap: 2vh 0;

		.column {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 12vw;
				height: 12vw;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 1vh;
			}
		}
	}
</style>